<template>
    <div :class="{'hidden': hidden}" class="pagination-container">
        <el-pagination
            :background="background"
            :current-page.sync="currentPage"
            :page-size.sync="pageSize"
            :layout="layout"
            :page-sizes="pageSizes"
            :total="Number(total)"
            :small="small"
            :pager-count="pagerCount"
            v-bind="$attrs"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
    name: 'Pagination'
})
export default class extends Vue {
    @Prop({ required: true }) private total!: number|string
    @Prop({ default: 1 }) private page!: number
    @Prop({ default: 10 }) private limit!: number
    @Prop({ default: () => [10, 20, 30, 100] }) private pageSizes!: number[]
    @Prop({ default: 'total, sizes, prev, pager, next, jumper' }) private layout!: string
    @Prop({ default: false }) private background!: boolean
    @Prop({ default: false }) private hidden!: boolean
    @Prop({ default: false }) private small!: boolean
    @Prop({ default: 7 }) private pagerCount!: number

    get currentPage() {
        return this.page;
    }

    set currentPage(value) {
        this.$emit('update:page', value);
    }

    get pageSize() {
        return this.limit;
    }

    set pageSize(value) {
        this.$emit('update:limit', value);
    }

    handleSizeChange(value: number) {
        this.currentPage = 1;
        this.$emit('pagination', { page: this.currentPage, limit: value });
    }

    handleCurrentChange(value: number) {
        this.$emit('pagination', { page: value, limit: this.pageSize });
    }
}
</script>

<style lang="scss" scoped>
.pagination-container {
    text-align: right;
    padding: 14px 16px;
}

.pagination-container.hidden {
    display: none;
}

.el-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>
